<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>完整轮播</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-size: 0;
      }
      #box {
        width: 600px;
        height: 900px;
        position: relative;
        margin: 0 auto;
        border: 1px solid #000000;
        overflow: hidden;
      }
      #imgBox {
        width: 6000px;
        height: 900px;
        position: absolute;
        left: 0px;
        top: 0;
      }
      #imgBox img {
        width: 600px;
        height: 900px;
      }
      #fyq {
        width: 100%;
        height: 50px;
        position: absolute;
        bottom: 15px;
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
      }
      #fyq li {
        width: 50px;
        height: 50px;
        margin: 0 5px;
        text-align: center;
        line-height: 50px;
        border: 1px solid #000000;
        background-color: #ffffff;
        font-size: 25px;
        border-radius: 50%;
        cursor: pointer;
      }
      #btnL,
      #btnR {
        width: 50px;
        height: 150px;
        position: absolute;
        top: calc((100% - 150px) / 2);
        /* display: none; */
        background-color: #000000;
        z-index: 1000;
      }
      #btnL:hover,
      #btnR:hover {
        display: block;
      }
      #btnL {
        left: 0;
      }
      #btnR {
        right: 0;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="imgBox">
        <img src="../轮播图img/1.jpg" alt="" />
        <img src="../轮播图img/2.jpg" alt="" />
        <img src="../轮播图img/3.jpg" alt="" />
        <img src="../轮播图img/4.jpg" alt="" />
        <img src="../轮播图img/5.jpg" alt="" />
        <img src="../轮播图img/6.jpg" alt="" />
        <img src="../轮播图img/7.jpg" alt="" />
        <img src="../轮播图img/8.jpg" alt="" />
        <img src="../轮播图img/9.jpg" alt="" />
        <img src="../轮播图img/1.jpg" alt="" />
      </div>
      <ul id="fyq">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
      <div id="btnL"></div>
      <div id="btnR"></div>
    </div>
  </body>
  <script>
    var imgBox = document.getElementById("imgBox");
    var fyq = document.getElementById("fyq");
    var btnL = document.getElementById("btnL");
    var btnR = document.getElementById("btnR");

    var fyqLi = fyq.children;

    var dq = 0,
      ym = 1,
      timeEnd = 0;

    var itme;

    function move(Kym) {
      console.log(Kym);
      clearInterval(itme);
      timeEnd = 0;
      var jl = (Kym - 1) * 600 - dq;
      if (Kym == 10) {
        btnColor(0);
      } else {
        btnColor(Kym - 1);
      }
      itme = setInterval(function () {
        var dj = (jl / 1500) * 10;
        timeEnd += 10;
        dq += dj;
        // console.log(Kym, jl, dj, dq, timeEnd);
        imgBox.style.left = -dq + "px";
        if (timeEnd >= 1500) {
          clearInterval(itme);
          timeEnd = 0;
          if (Kym == 10) {
            ym = 1;
            dq = 0;
            imgBox.style.left = -dq + "px";
          }
        }
      }, 10);
    }

    function btnColor(Cym) {
      for (var i = 0; i < fyqLi.length; i++) {
        fyqLi[i].style.backgroundColor = "#ffffff";
        fyqLi[i].style.color = "#000000";
      }
      fyqLi[Cym].style.backgroundColor = "#000000";
      fyqLi[Cym].style.color = "#ffffff";
    }

    for (var i = 0; i < fyqLi.length; i++) {
      fyqLi[i].onclick = function () {
        ym = Number(this.innerHTML);
        move(ym);
      };
    }
    btnColor(0);

    btnL.onclick = function () {
      if (ym > 0) {
        ym--;
        move(ym);
      }
    };
    btnR.onclick = function () {
      if (ym < 10) {
        ym++;
        move(ym);
      }
    };
  </script>
</html>
